<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="mycanvas" width="600px" height="600px"></canvas>
		<script type="text/javascript">
			const mycanvas = document.getElementById('mycanvas');
			const ctx = mycanvas.getContext('2d');
			
			// 画五角星
			function drawStar(ctx,r){
			  ctx.save();
			  ctx.beginPath()
			  ctx.moveTo(r,0);
			  for (var i=0;i<9;i++){
			    ctx.rotate(Math.PI/5);
			    if(i%2 == 0) {
			      ctx.lineTo((r/0.525731)*0.200811,0);
			    } else {
			      ctx.lineTo(r,0);
			    }
			  }
			  ctx.closePath();
			  ctx.fillStyle = 'white';
			  ctx.fill();
			  ctx.restore();
			 }
			
			ctx.translate(300 , 300);
			
			var rs = new Array(50);
			var xs = new Array(50);
			var ys = new Array(50);
			for(let i = 0 ; i < 50 ; i ++) {
				rs[i] = Math.floor(Math.random() * 2) + 5;
				xs[i] = Math.floor(Math.random() * 200);
				ys[i] = Math.floor(Math.random() * 200);
			}
			var y = 0;
			var dir = true; // true代表向下
			setInterval(() => {
				ctx.clearRect(0 , 0 , 200 , 200);
				ctx.fillRect(0 , 0 , 200 , 200);
				if(dir) {
					y = y + 10;
					if(y >= 20) {
						dir = false;
					}
				} else {
					y = y - 10;
					if(y <= -20) {
						dir = true;
					}
				}
				ctx.save();
				ctx.arc(100+y , 100+y , 80 , 0 , Math.PI*2 , true);
				ctx.fillStyle = 'rgb(27, 46, 105)'
				ctx.fill();
				ctx.clip();
				
				for(let i = 0 ; i < 50 ; i ++) {
					ctx.save();
					let r = rs[i];
					let x = xs[i];
					let y = ys[i];
					ctx.translate(x , y);
					drawStar(ctx , r);
					ctx.restore();
				}	
				ctx.restore();
			} , 200);
			
			
				
		</script>
	</body>
</html>
